<template>
	<div class="picker-container">
		<div class="placehold-content" @click="show"></div>
		<slot></slot>
		<!--地址选择组件-->
		<mt-popup position="bottom" v-model="isShow">
			<mt-picker class="picker-box" :showToolbar="constState" @change="onValuesChange" :slots="myAddressSlots" :valueKey='valueKey'>
				<span class="usi-btn-cancel" @click="cancel">取消</span>
				<span class="usi-btn-sure" @click="sure">完成</span>
			</mt-picker>
		</mt-popup>
	</div>
</template>
<script>
	import server from '@/server/api';
	export default {
		name: 'address-picker',
		props: {
			confirmHandle: {
				type: Function,
				require: true
			}
		},
		data() {
			return {
				valueKey: 'area_name',
				constState: true, // 是否显示picker头部
				isShow: false, // 是否显示省市三联动 弹窗
				selectedProvince: {},
				selectedcityData: {},
				selectedCountyData: {},
				provinceData: [], // 存储获取的省级数据
				cityData: [], // 存储获取的市级数据
				countyData: [], // 存储获取的县/区级数据
				myAddressSlots: [{
					values: null
				}, {
					values: null
				}, {
					values: null
				}],

			}
		},
		created() {
			this.getProvinceDataAsyn()
		},
		watch: {
			selectedProvince: function(curVal, oldVal) {
				if(curVal.area_id != oldVal.area_id) {
					this.getCityDataAsyn({
						province_id: curVal.area_id
					})
				}
			},
			cityData: function(curVal, oldVal) {
				this.myAddressSlots[1].values = curVal
			},
			selectedcityData: function(curVal, oldVal) {
				if(curVal.area_id != oldVal.area_id) {
					this.getDistrictAsyn({
						city_id: curVal.area_id
					})
				}
			},
			countyData: function(curVal,oldVal) {
				this.myAddressSlots[2].values = curVal
			}
		},
		computed: {},
		methods: {
			//获取省级数据
			getProvinceDataAsyn() {
				const _this = this;
				server.post('/index/user/getarea', function(res) {
					_this.provinceData = res.data
					_this.getCityDataAsyn({
						province_id: res.data[0].area_id
					})
				})
			},
			// 获取市级数据
			getCityDataAsyn(param) {
				var _this = this;
				server.post('/index/user/get_citys', param, function(res) {
					_this.cityData = res.data
					_this.getDistrictAsyn({
						city_id: res.data[0].area_id
					})
				})
			},
			getDistrictAsyn(param) {
				var _this = this;
				server.post('/index/user/get_district', param, function(res) {
					_this.countyData = res.data
				})
			},
			onValuesChange(picker, values) {
				var solt0Value = picker.getSlotValue(0)
				var solt1Value = picker.getSlotValue(1)
				var solt2Value = picker.getSlotValue(2)
				var selectedProvince = this.selectedProvince
				var selectedcityData = this.selectedcityData
				var selectedCountyData = this.selectedCountyData
				if(solt0Value) {
					if(selectedProvince) {
						if(selectedProvince.area_id != solt0Value.area_id) {
							this.selectedProvince = solt0Value
						}
					} else {
						this.selectedProvince = solt0Value
					}
				}
				if(solt1Value) {
					if(selectedcityData) {
						if(selectedcityData.area_id != solt1Value.area_id) {
							this.selectedcityData = solt1Value
						}
					} else {
						this.selectedProvince = solt1Value
					}
				}
				if(solt2Value) {
					if(selectedProvince) {
						if(selectedCountyData.area_id != solt2Value.area_id) {
							this.selectedCountyData = solt2Value
						}
					} else {
						this.selectedCountyData = solt2Value
					}
				}
			},
			show() {
				this.isShow = true
				this.myAddressSlots[0].values = this.provinceData
				this.myAddressSlots[1].values = this.cityData
				this.myAddressSlots[2].values = this.countyData
			},
			cancel() {
				this.isShow = false
			},
			sure() {
				var selectedProvince = Object.assign({},this.selectedProvince);
				var selectedcityData = Object.assign({},this.selectedcityData);
				var selectedCountyData = Object.assign({},this.selectedCountyData);
				var address = [
					selectedProvince,
					selectedcityData,
					selectedCountyData
				]
				this.confirmHandle(address)
				this.isShow = false
			}
		}
	}
</script>
<style lang="scss">
	.picker-container {
		position: relative;
		.placehold-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.mint-popup-bottom {
			width: 100%;
			.picker {
				.picker-toolbar {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 2px #DDDDDD;
					height: 1rem;
					box-sizing: border-box;
					span {
						font-size: 0.4rem;
						color: #108ee9;
						&.usi-btn-cancel {
							padding-left: 50px;
						}
						&.usi-btn-sure {
							padding-right: 50px;
						}
					}
				}
				.picker-items {
					.picker-slot-center {
						width: 100%;
						&:after,
						&:before {
							position: absolute;
							left: 5px;
							right: 5px;
							height: 2px;
							width: 100%;
							background-color: #EF4F4F;
							;
							content: ' ';
							z-index: 100;
						}
						&:before {
							top: 40%;
						}
						&:after {
							top: 60%;
						}
						.picker-slot-wrapper {
							.picker-item {
								color: #707274;
								&.picker-selected {
									color: #000000;
								}
							}
						}
					}
				}
			}
		}
	}
</style>